<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain @click="showAdd">添加</el-button></el-col>
            <el-col :span="6"><el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 98%">
        <el-table-column
            prop="name"
            label="姓名"
            width="120"
            align="center">
            <!-- align="center"意思是居中显示 -->
        </el-table-column>
        <el-table-column
            prop="idcard"
            label="身份证号"
            width="140"
            align="center">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="source"
            label="接触来源"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="address"
            label="隔离地址"
            width="140"
            align="center">
        </el-table-column>
        <el-table-column 
            prefix-icon="el-icon-time"
            prop="date"
            label="隔离开始日期"
            width="180"
            align="center">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="300"
            align="center">
                <el-button size="mini" @click="showEdit">编辑</el-button>
                <el-button type="primary" plain size="mini" @click="showRelieve">解除隔离</el-button>
                <el-button type="primary" plain size="mini" @click="showDiagnosed">转为患者</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage3"
            :page-sizes="[1, 2, 3]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="3">
        </el-pagination>
        <el-dialog title="添加" :visible.sync="dialogFormVisible3">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.gender">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="idcard">
                        <el-input v-model="form.idcard" placeholder="身份证号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input-number v-model="form.age"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="form.phone" placeholder="电话号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接触来源">
                        <el-input v-model="form.source" placeholder="感染来源"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="隔离地址">
                        <el-input v-model="form.address" placeholder="隔离地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隔离开始时间">
                        <el-date-picker type="date" placeholder="住院时间" v-model="form.date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="住址">
                <el-input v-model="form.address2" placeholder="住址"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible3 = false" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.gender">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="idcard">
                        <el-input v-model="form.idcard" placeholder="身份证号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input-number v-model="form.age"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="form.phone" placeholder="电话号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接触来源">
                        <el-input v-model="form.source" placeholder="感染来源"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="隔离地址">
                        <el-input v-model="form.address" placeholder="隔离地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隔离开始时间">
                        <el-date-picker type="date" placeholder="住院时间" v-model="form.date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="住址">
                <el-input v-model="form.address2" placeholder="住址"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="转为患者" :visible.sync="dialogFormVisible2">
            <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="住院时间">
                        <el-date-picker type="date" placeholder="住院时间" v-model="form.hospital_date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="症状">
                        <el-input v-model="form.symptom" placeholder="症状"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="治疗医院">
                        <el-input v-model="form.hospital" placeholder="治疗医院"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否重症">
                        <el-radio-group v-model="form.severe">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" rows="4"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
    export default {
      data() {
        return {
          input: '',
          tableData: null,
          currentPage3: 3,
          dialogFormVisible: false,
          dialogFormVisible2: false,
          dialogFormVisible3: false,
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
          form: {
            name:'',
            idcard:'',
            gender:1,
            source:'',
            address:'',
            date:'',
            age:undefined,
            phone:'',
            address2:'',
            hospital_date:'',
            symptom:'',
            hospital:'',
            severe:0,
            remark:''
        },
        rules: {
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
            idcard: [
                { required: true, message: '请输入身份证号', trigger: 'blur' },
                { min: 18, max: 18, message: '长度是 18 个字符', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                {
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                  message: '请输入正确的手机号码'
                }
        ]
        },
        formLabelWidth: '120px'
        }
      },
      created(){
      this.fetchDate()
    },
    methods: {
        fetchDate(){
          request({
              url:'../patient_contact.json',
              method:'get'
          }).then(response => {
              this.tableData = response.data
          })
        },
        showAdd(){
            this.dialogFormVisible3 = true
            request({
              url:'../contact_list3.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
        },
        showEdit(){
            this.dialogFormVisible = true
            request({
              url:'../contact_list.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
        },
        showRelieve() {
        this.$confirm('您确认要解除隔离吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已解除隔离!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
        showDiagnosed(){
            this.dialogFormVisible2 = true
            request({
              url:'../contact_list2.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
        }
  </script>
